<template>

	<!-- 文章分类完成 -->
	<div id="fenlei">
		<div class="cate">
			<p>文章分类</p>
			
			<el-button type="primary" @click="showDoading = true,mubu=true,FromNUll()">添加分类</el-button>
		</div>
		<el-table :data="cateGoryList2" style="width: 90%;">
			<el-table-column label="序号" width="320">
				<template #default="scope">
					<div style="display: flex; align-items: center">
						<!-- 序号用索引就行了 -->
						<span style="margin-left: 10px">{{ scope.$index+1 }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="分类名称" width="320">
				<template #default="scope">
					<el-tag>{{ scope.row.name }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="分类别名" width="320">
				<template #default="scope">
					<el-tag>{{ scope.row.asName }}</el-tag>
				</template>
			</el-table-column>

			
			<el-table-column label="操作">
				<template #default="scope">
					<!-- 操作数据需要用到id -->
					<el-button size="small" @click="handleEdit(scope.row.id, scope.row)"
						>编辑</el-button
					>
					<el-button
						size="small"
						type="danger"
						@click="handleDelete(scope.row.id, scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>


	</div>

	<!-- elementplus太卡打不开，自制 -->
	<!-- 添加/编辑文章分类对话框 -->
	<div class="Doading" v-show="showDoading">
		<h1>{{ H }}</h1>
		<label for="name">分类名称:
			<input id="name" v-model="cateGoryFrom.name" type="text">
		</label>
		<div></div>
		<label for="asName">分类别名:
			<input id="asName" v-model="cateGoryFrom.asName"type="text">
		</label>
		<div>
			<button @click="showD" v-if="buttonShow">添加</button>
			<button @click="upData" v-else>修改</button>
			<button @click="showDoading = !showDoading,mubu = false,ElMessage('取消编辑')">取消</button>
		</div>
	</div>

	<!-- 蒙版，幕布 -->
	<div class="mubu" v-show="mubu" @click="mubu = false,showDoading = false,deleteDoading = false"></div>

	<!-- 删除文章对话框 -->
	<div class= "deleteDoading" v-show="deleteDoading">
		<h2>是否删除该文章分类</h2>
		<div>
			<button @click="deleteCateGoryByiId">确认</button>
			<button @click="deleteDoading = false,mubu = false,ElMessage('取消删除')">取消</button>
		</div>
	</div>

</template>

<script setup lang="ts">

	import {cateGoryListService,deleteCateGory,cateGory,cateGoryDetails,update} from '@/Api/cateGory.js'
	import { ref } from 'vue';	
	import { ElMessage } from 'element-plus'

	//添加文章对话框
	const showDoading = ref(false)
	//删除文章对话框
	const deleteDoading = ref(false)
	//幕布蒙版显示
	const mubu = ref(false)
	//添加编辑按钮的show
	const buttonShow = ref(true)

	//暂存文章的id
	const cateGoryId = ref()
	//添加分类的名称别名数据
	const cateGoryFrom = ref({
		name:'',
		asName:'',
		id:''
	})

	const H = ref("添加文章")


	//获取文章分类列表数据
	const cateGoryList2 = ref()

	//1.展示文章分类列表
	const cateGoryList1 = async () =>{
		let {data:res} = await cateGoryListService()
		cateGoryList2.value = res.data
		
	}
	cateGoryList1()

	const FromNUll = () => {
		cateGoryFrom.value.name = ''
		cateGoryFrom.value.asName = ''

		//对话框的显示变化
		buttonShow.value = true
		H.value = "添加文章"
	}

	//2.添加文章分类，并打开对话框
	const showD = async () =>{

		if(cateGoryFrom.value.name == ''||cateGoryFrom.value.asName == ''){
			ElMessage({
				message: '不能添加空数据',
				type: 'error',
			})
			return
		}

		await cateGory(cateGoryFrom.value)
	
		ElMessage({
			message: '添加成功',
			type: 'success',
		})
		
		//重置数据
		showPuls()
		//刷新列表
		cateGoryList1()
	}
	const showPuls = () => {
		showDoading.value = false
		mubu.value = false
		cateGoryFrom.value.asName = ''
		cateGoryFrom.value.name = ''
		
	}
		
	//3.编辑文章
	const handleEdit = async (id, row) => {
		cateGoryId.value = id

		showDoading.value = true
		mubu.value = true
		H.value = "编辑文章"

		//根据id显示文章详情
	  const {data:res} = await cateGoryDetails(id)

		cateGoryFrom.value.name = res.data.name
		cateGoryFrom.value.asName = res.data.asName

		buttonShow.value = false

	}


	//3.1修改数据
	const upData = async () => {

		if(cateGoryFrom.value.name == ''||cateGoryFrom.value.asName == ''){
			ElMessage({
				message: '请填入要修改的数据',
				type: 'error',
			})
			return
		}
		
		//根据id编辑数据
		cateGoryFrom.value.id = cateGoryId.value
		
		await update(cateGoryFrom.value)

		ElMessage({
			message: '修改成功',
			type: 'success',
		})

		showDoading.value = false
		mubu.value = false
		cateGoryList1()

	}

//4.0.删除文章对话框show and id存储
const handleDelete = (id, row) => {
	console.log(id)
	deleteDoading.value = true
	mubu.value = true
  cateGoryId.value = id
}
//4.1根据id delete分类文章
const deleteCateGoryByiId = async () => {
	
	//这里需要async await同步，不然无法时时刷新界面
	await deleteCateGory(cateGoryId.value)
	ElMessage({
    message: '删除成功',
    type: 'success',
  })
	//刷新列表
	cateGoryList1()
	
	deleteDoading.value = false
	mubu.value = false
	
	
}

</script>

<style lang="scss" scoped>
#fenlei{
	box-shadow: 1px 1px 12px #bba5a5;
	box-sizing: border-box;
	height: 100%;
	padding: 20px;
}

.cate{
	display:flex;
	width: 90%;

	justify-content: space-between;
	align-items: center;
	
}

// 以下皆是对话框
.Doading{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	width:400px;
	height: 280px;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 2px 2px 10px #000;
	text-align: center;

	input{
		height: 30px;
		margin-top:10px;
		padding-left: 5px;
	}
	button{
		margin: 20px;
		width: 65px;
		border: none;
		border-radius: 5px;
		color: #fff;
		font-weight: bolder;
		background-color: #8c89f0;
		height: 40px;
	}
	
}
.deleteDoading{
	z-index: 10;
	width:300px;
	height:150px;
	box-shadow: 2px 2px 10px #000;
	text-align: center;
	left: 50%;
	top: 50%;
	background-color: #fff;
	transform: translate(-50%,-50%);
	border-radius: 15px;
	position: fixed;
	padding:20px;
	button{
		margin: 20px;
		width: 65px;
		border: none;
		border-radius: 5px;
		color: #fff;
		font-weight: bolder;
		background-color: #8c89f0;
		height: 40px;
	}
}
.mubu{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,.5);
}
</style>